<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
				content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/index.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<section class="banner swiper-container">
		<section class="swiper-wrapper">
			<section class="swiper-slide" v-for="item in bannerList" :style="{backgroundImage: 'url(' + item + ')'}">
			</section>
			<!--			<section class="swiper-slide" style="background-image: url(./images/news1.jpg)">-->
			<!--			</section>-->
			<!--			<section class="swiper-slide" style="background-image: url(./images/news2.jpg)">-->
			<!--			</section>-->
			<!--			<section class="swiper-slide" style="background-image: url(./images/news3.jpg)">-->
			<!--			</section>-->
			<!--			<section class="swiper-slide" style="background-image: url(./images/news4.jpg)">-->
			<!--			</section>-->
			<!--			<section class="swiper-slide" style="background-image: url(./images/news5.jpg)">-->
			<!--			</section>-->
		</section>
		<section class="swiper-pagination banner-pagination"></section>
	</section>
	<header>
		<img src="./images/logo-header.png" alt="" class="logo">
		<nav class="nav">
			<a class="nav-item active" href="javascript:;">首页</a>
			<a class="nav-item" href="./about.html">关于竞赛</a>
			<a class="nav-item" href="./match-item.html">赛项</a>
			<a class="nav-item" href="./news.html">通知公告</a>
			<a class="nav-item" href="./notice.html">赛项说明</a>
			<section v-if="userInfo" class="dropdown">
				<img class="avatar" src="./images/icons/default-avatar.png" alt="">
				<span class="username">{{ userInfo.name }}</span>
				<img class="dropdown" src="./images/icons/dropdown.png" alt="">
				<section class="dropdown-menu">
					<a href="./personal.html"><img src="./images/icons/user-icon.png" alt="">个人中心</a>
					<a href="./message.html"><span class="badge" v-if="unReadCount">{{ unReadCount }}</span><img src="./images/icons/message-icon.png" alt="">消 息</a>
					<a href="javascript:;" @click="logOut" class="log-out">退出</a>
					</section>
			</section>
			<template v-else>
				<a href="./login.html" class="login">登录</a>
				<a href="./register.html" class="register">注册</a>
			</template>
		</nav>
	</header>
<!--	新闻列表-->
	<section class="news">
		<section class="common-title">
			<section class="en">NOTICE</section>
			<section class="cn">通知公告</section>
			<section class="desc">
				全国青少年电子信息智能创新大赛
				<img src="./images/caret.png" alt="">
			</section>
		</section>
		<section class="news-content">
			<section class="news-info">
				<section class="news-swiper swiper-container">
					<section class="swiper-wrapper">
						<section class="swiper-slide" :style="{backgroundImage: 'url(' + currNews.bannerImg + ')'}"></section>
					</section>
					<!--<section class="swiper-pagination news-pagination"></section>-->
				</section>
				<section class="title" :title="currNews.title">{{ currNews.title }}</section>
				<section class="line"></section>
				<section class="desc">{{ currNews.introduction | substr(2)}}</section>
			</section>
			<ul class="news-list">
				<li v-for="item in newsList">
					<a :class="{active: item.id === currNewsId}" @mouseover="currNewsId = item.id" :href="'./news-details.html?id=' + item.id">
						<section class="time">
							<section class="date">{{ item.date }}</section>
							<section class="month">{{ item.month }}</section>
						</section>
						<section class="details">
							<section class="title" :title="item.title">{{ item.title }}</section>
							<section class="desc" :title="item.introduction" v-html="item.introduction"></section>
						</section>
					</a>
				</li>
			</ul>
		</section>
	</section>
<!--	赛程-->
	<section class="schedule">
		<section class="common-title">
			<section class="en">SCHEDULE</section>
			<section class="cn">创新大赛赛程</section>
			<section class="desc">
				你想了解的这里都有，看下流程吧
				<img src="./images/caret-blue.png" alt="">
			</section>
		</section>
		<section class="schedule-wrapper">
			<section class="schedule-content">
				<section class="game-types">
					<section class="game-type-item">
						<img src="./images/game-type1.png" alt="">
						<section class="title">电子科技类</section>
						<section class="desc">
							<p>电子控制工程赛</p>
							<p>电子艺术挑战赛</p>
						</section>
					</section>
					<section class="game-type-item">
						<img src="./images/game-type2.png" alt="">
						<section class="title">智能机器人类</section>
						<section class="desc">
							<p>智能运输器开源主题赛、智能物联网主题赛、人形机器人开源主题赛、互联网+无人驾驶主题赛
								、无人机主题赛、智慧物流挑战赛、物资分拣主题赛
							</p>
							
							
						</section>
					</section>
					<section class="game-type-item">
						<img src="./images/game-type3.png" alt="">
						<section class="title">软件编程类</section>
						<section class="desc">
							<p>Kodu创意编程赛、图形化编程挑战赛</p>
							<p>Python编程挑战赛、幼儿创意表演展示活动</p>
						</section>
					</section>
					<section class="sign game-type-item active">
						<img src="./images/game-type4.png" alt="">
<!--						<img src="./images/sign-up.png" alt="">-->
						<section class="bottom">
							<section class="title">创新大赛报名</section>
							<a href="./match-item.html"><img style="margin: 0 4px;" src="./images/icons/plane.png" alt="">立即报名</a>
						</section>
					</section>
				</section>
				<section class="steps">
					<section class="step-item">
						<img src="./images/first-step.png" alt="">
						<section class="title">初赛</section>
						<section class="time">
							<section>起始时间</section>
							<section>2020年11月 —— 2021年4月</section>
						</section>
					</section>
					<img src="./images/next-icon.png" alt="">
					<section class="step-item">
						<img src="./images/second-step.png" alt="">
						<section class="title">复赛</section>
						<section class="time">
							<section>起始时间</section>
							<section>2021年4月 —— 2021年6月</section>
						</section>
					</section>
					<img src="./images/next-icon.png" alt="">
					<section class="step-item">
						<img src="./images/final-step.png" alt="">
						<section class="title">总决赛</section>
						<section class="time">
							<section>起始时间</section>
							<section>2021年6月—— 2021年8月</section>
						</section>
					</section>
				</section>
			</section>
		</section>
	</section>
	<section class="game-area">
		<section class="common-title">
			<section class="en">SCHEDULE</section>
			<section class="cn">创新大赛赛区</section>
			<section class="desc">
				全国青少年电子信息智能创新大赛
				<img src="./images/caret.png" alt="">
			</section>
		</section>
		<section class="area-list">
<!--			赛区列表-->
			<section class="area-item" v-for="item in areaList">
				<section class="title">
					<section class="line"></section>
					<section class="text">{{ item.zoneName }}</section>
				</section>
				<section class="info" style="z-index: 9999999999999999999;">
					<section class="info-wrapper">
						<section class="info-title">{{ item.zoneName }}承办单位</section>
						<section class="company-item" v-for="company in item.comanyList">
							<section class="name">{{ company.companyName }}</section>
							<section class="contact">
								<img src="./images/user.png" alt="">
								{{ company.contacts }} {{ company.phone }}
							</section>
						</section>
					</section>
				</section>
			</section>
		</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./lib/layui/lay/modules/layer.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="../js/abkj/match/api/zone.js"></script>
<script src="../js/abkj/match/api/news.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="../js/abkj/match/api/banner.js"></script>
<script src="../js/abkj/match/api/undertakeunit.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		new Vue({
			el: '.wrapper',
			data: {
				userInfo: getUserInfo(),
				currNewsId: 0,
				unReadCount: 0,
				bannerList: [],
				newsList: [],
				areaList: []
			},
			computed: {
				currNews: function () {
					var vm = this
					var item = {}
					for (var i = 0; i < this.newsList.length; i++) {
						if (this.newsList[i].id === vm.currNewsId) {
							item = this.newsList[i]
							break
						}
					}
					return item
				}
			},
			created: function () {
				var vm = this
				this.userInfo && ClientNewsgetUnReadNum('', function (data) {
					vm.unReadCount = data.length
				}, function () {})
				BannerqueryList({}, function (data) {
					vm.bannerList = data.map(function (item) {
						return item.imgurl
					})
				}, function (err, errText) {
				})
				ClientNewsPageList2(

						{page: {current: this.page, size: 10},cond:{
							eq:{modelName:"通知公告"}
							,
		                    order:{ //排序条件
		                    	type:"desc",
		                    	attrName:["sort_id","create_time"]
		                    }
						}}, function (data) {
					// alert(JSON.stringify(data))
					vm.newsList = data.records.map(function (item) {
						item.createTime = item.createTime || ''
						var time = item.createTime.split(' ')[0].split('-')
						item.date = (time[2] || '').split('T')[0]
						item.month = time[0] + '/' + time[1]
						return item
					}).slice(0, 4)
					vm.currNewsId = vm.newsList[0].id
				}, function (err, errText) {
					alert(errText)
				})
				ZonequeryList({},function(data){
					vm.areaList = data
					UndertakeUnitqueryList({}, function (data) {
						var varList=[];
						for(var i=0; i<vm.areaList.length; ++i) {
							var varListItem={
								zoneName:vm.areaList[i].zoneName,
								comanyList:[]
							}
							for(var t=0;t<data.length;++t){
								if(vm.areaList[i].id==data[t].zoneId){
									varListItem.comanyList.push(data[t])
								}
							}
							varList.push(varListItem)
						}
						vm.areaList = varList.filter(function (item) {
							return item.comanyList.length > 0
						})
					}, function (err, errText) {

					})
				})

			},
			methods: {
				logOut: function () {
					this.$confirm({
						title: '确定退出吗？',
						success: function () {
							localStorage.clear()
							location.reload()
						}
					})
				}
			}
		})
		new Swiper({
			el: '.banner',
			loop: true,
			pagination: {
				el: '.banner-pagination',
				clickable: true
			}
		})
		renderSwiper()

		function renderSwiper() {
			$('.banner').height(520 * $(window).outerWidth() / 1920)
			$(window).on('resize', function () {
				$('.banner').height(520 * $(window).outerWidth() / 1920)
			})
		}
	})
</script>
</body>
</html>
